<template>
    <div :class="['chat-window', { 'collapsed': isCollapsed }]">
        <Message v-for="msg in messages" :key="msg.id" :message="msg" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import Message from '../components/Message.vue';
import { useStore } from 'vuex';
import { onUpdated } from 'vue'

export default defineComponent({
    name: 'ChatWindow',
    components: {
        Message,
    },
    setup() {
        const store = useStore();
        // 获取 Vuex store 中的 isCollapsed 状态
        const isCollapsed = computed(() => store.getters.isCollapsed);

        const messages = computed(() => store.getters.allMessages);
        const chatWindow = ref<HTMLElement>();

        onUpdated(() => {
            if (chatWindow.value) {
                chatWindow.value.scrollTop = chatWindow.value.scrollHeight
            }
        })
        return {
            messages,
            isCollapsed
        };
    },
});
</script>

<style scoped>
.chat-window {
    background-color: #222;
    height: calc(100% - 110px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 改为拉伸填充 */
    justify-content: flex-start;
    transition: all 0.3s ease;

    /*width: 100%;*/
    width: 60%;
    margin: 0 auto;
}

.chat-window.collapsed {
    /* width: 100%; */
    width: 60%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* 折叠时整体居中 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .chat-window {
        width: 60% !important;
        margin: 0 2.5% !important;
        height: calc(100vh - 100px);
        padding: 10px;
    }

    .messages-container {
        gap: 10px;
    }
}
</style>